<template>
	<view class="container">
		<view class="publish-card">
			<view class="publish-left">
				<view class="publish-title">发布话题</view>
				<view class="publish-desc">分享经历、提出问题，获取更多灵感与帮助</view>
			</view>
			<wd-button type="primary" size="small" @click="goToPublish">
				<wd-icon name="plus" size="16px" />
				<text style="margin-left:6rpx;">去发布</text>
			</wd-button>
		</view>

		<view class="discuss-list">
			<view v-for="item in discussList" :key="item.id" class="discuss-item" @click="goToDiscuss(item)">
				<view class="user-row">
					<wd-img :src="utils.getAvatarPath(item.user && item.user.avatar ? item.user.avatar : '')"
						width="56rpx" height="56rpx" round />
					<view class="user-info">
						<view class="nickname">{{ (item.user && item.user.nickname) || '匿名用户' }}</view>
						<view class="time">{{ item.created_at ? formatRelativeTime(item.created_at) : '' }}</view>
					</view>
				</view>

				<!-- 左右结构：左侧媒体缩略图，右侧标题与内容 -->
				<view class="item-body">
					<view v-if="item.media && item.media.length > 0" class="item-left">
						<wd-img :src="utils.imgPath(item.media[0])" width="220rpx" height="160rpx" radius="12rpx"
							mode="aspectFill" />
					</view>
					<view class="item-right">
						<view class="title">{{ item.title }}</view>
						<view v-if="item.content" class="content">{{ item.content }}</view>
					</view>
				</view>

				<view class="meta">
					<wd-icon name="eye" size="20px" />
					<text class="meta-text">{{ item.view_count || 0 }} 浏览</text>
				</view>
			</view>
			<!-- 加载状态 -->
			<q-loadmore :list="discussList" :status="loadStatus" />
		</view>

	</view>
	<q-tabbar :selected="1"></q-tabbar>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { baseAPI } from '@/api/index.js';
import utils from '@/utils/utils.js';
import { formatRelativeTime } from '@/utils/timeFormat.js';

const discussList = ref([]);
let pageNum = 1;
const loadStatus = ref('loading');

onLoad(() => {
	getDiscussList();
});

onPullDownRefresh(() => {
	pageNum = 1;
	discussList.value = [];
	getDiscussList();

	uni.stopPullDownRefresh();
});
onReachBottom(() => {
	pageNum++;
	getDiscussList();
});

function getDiscussList() {
	loadStatus.value = 'loading';
	baseAPI.post('discuss/getListByPage', {
		page: pageNum
	}).then((res) => {
		if (res.code === 200) {
			discussList.value = discussList.value.concat(res.result.list);
			loadStatus.value = res.result.hasMore ? 'more' : 'nomore';
		}
	})
}


function goToDiscuss(item) {
	uni.navigateTo({ url: `/pages/discuss/detail?id=${item.id}` });
}

function goToPublish() {
	uni.navigateTo({
		url: '/pages/discuss/publish'
	});
}
</script>

<style lang="scss" scoped>
.publish-card {
	padding: 20rpx;
	border-radius: 10rpx;
	background: linear-gradient(135deg, #f5f7ff 0%, #eef3ff 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.publish-left {
	display: flex;
	flex-direction: column;
}

.publish-title {
	font-size: 30rpx;
	font-weight: 600;
	color: #293248;
}

.publish-desc {
	font-size: 24rpx;
	color: #5f6b85;
}

.discuss-list {
	flex: 1;
}

.discuss-item {
	background: #fff;
	padding: 20rpx;
}

.item-body {
	display: flex;
	align-items: stretch;
	gap: 16rpx;
	flex-direction: row-reverse;
	/* 图片在右侧，文本在左侧 */
}

.item-left {
	width: 220rpx;
	flex-shrink: 0;
}

.item-right {
	flex: 1;
	min-width: 0;
	/* 允许文本在 flex 中正确截断 */
}

.user-row {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.user-info {
	display: flex;
	flex-direction: column;
}

.nickname {
	font-size: 28rpx;
	color: #333;
}

.time {
	font-size: 22rpx;
	color: #999;
}

.title {
	margin-top: 0;
	font-weight: 600;
	color: #111;
}

.content {
	margin-top: 8rpx;
	font-size: 28rpx;
	color: #666;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}



.meta {
	margin-top: 16rpx;
	display: flex;
	align-items: center;
	gap: 8rpx;
	color: #888;
}

.meta-text {
	font-size: 24rpx;
}
</style>
